<template>
  <body>
  <div>
  <div>
    <el-row>
      <el-col :span="4">
        <el-input
            placeholder="请输入部门名称"
            v-model="deptName"
            clearable
        prefix-icon="el-icon-search">
        </el-input>
        <el-tree
            class="filter-tree"
            :data="data"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree"
            :expand-on-click-node="false"
            @node-click="handleNodeClick">
        </el-tree>
      </el-col>
      <el-col :span="20">
        <el-form :inline="true" :model="queryParams" ref="queryParams" class="demo-form-inline">
          <el-form-item label="用户名称">
            <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="queryParams.status" placeholder="用户状态">
              <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in dictDataList"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
                v-model="dataRange"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            <el-button type="primary" icon="el-icon-refresh" @click="resetQueryParams">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="userId"
              label="编号">
          </el-table-column>
          <el-table-column
              prop="userName"
              label="名称">
          </el-table-column>
          <el-table-column
              prop="nickName"
              label="昵称">
          </el-table-column>
          <el-table-column
              prop="deptName"
              label="部门">
          </el-table-column>
          <el-table-column
              prop="phonenumber"
              label="手机号码">
          </el-table-column>
          <el-table-column
              label="状态">
            <template v-slot="scope">
              <el-switch
                  v-model="scope.row.status"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="0"
                  inactive-value="1">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
              prop="createTime"
              label="创建时间">
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="100">
                        <template v-slot="scope">
                          <el-button @click="handleUpdate(scope.row)" type="text" size="small">修改</el-button>
                          <el-button @click="handleDel(scope.row)" type="text" size="small">删除</el-button>
                        </template>
          </el-table-column>
        </el-table>
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
          <el-form :model="hxForm">
            <el-form-item label="用户昵称" :label-width="formLabelWidth">
              <el-input v-model="hxForm.nickName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="归属部门" :label-width="formLabelWidth">
              <el-input v-model="hxForm.deptName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" :label-width="formLabelWidth">
              <el-input v-model="hxForm.phonenumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth">
              <el-input v-model="hxForm.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户性别" :label-width="formLabelWidth">
              <el-input v-model="hxForm.sex==1?'女':'男'" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
              <el-radio-group v-model="hxForm.status">
                <el-radio label="0">正常</el-radio>
                <el-radio label="1">停用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="岗位" :label-width="formLabelWidth">
              <el-input v-model="hxForm.postName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色" :label-width="formLabelWidth">
              <el-input v-model="hxForm.roleName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input v-model="hxForm.remark" autocomplete="off"></el-input>
            </el-form-item>
<!--            <el-form-item label="活动区域" :label-width="formLabelWidth">-->
<!--              <el-select v-model="form.region" placeholder="请选择活动区域">-->
<!--                <el-option label="区域一" value="shanghai"></el-option>-->
<!--                <el-option label="区域二" value="beijing"></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
  </div>

</body>

</template>

<script>


export default {
  name: "NewView",
  data(){
    return{
      data:[],
      defaultProps: {
        children: 'children',
        label: 'deptName'
      },
      hxForm:{},
      deptName:'',
      queryParams:{
        userName:'',
        phonenumber:'',
        status:'',
        beginTime:'',
        endTime:'',
        deptId:''
      },
      dictDataList:[],
      dataRange:[],
      tableData:[],
      size:10,
      total:0,
      current:1,
      dialogFormVisible:false,
      formLabelWidth:'150px',
      title:"",

      deptOptions:false,
    }
  },
  watch:{
    deptName(val){
      this.$refs.tree.filter(val);
    }
  },methods:{
    handleUpdate(row){
        this.hxForm=row;
        this.dialogFormVisible=true;
    },
  handleNodeClick(data){
    this.queryParams.deptId=data.id
    this.search()
    // this.axios.get("/user/user/getUserByDeptId",{params:{size:this.size,current:this.current,deptId:data.id}}).then(res=>{
    //   this.tableData=res.data.records
    //   this.total=res.data.total
    // })
  },
  search(){
    if(null!=this.dataRange && ''!=this.dataRange){
      this.queryParams.beginTime=this.dataRange[0]
      this.queryParams.endTime=this.dataRange[1]
    }
    this.axios.post("/user/user/list?size="+this.size+"&current="+this.current,this.queryParams).then(res=>{
      this.tableData=res.data.records
      this.total=res.data.total
    })
  },
  handleSelectionChange(selection) {
    this.ids=selection.map(item => item.dictId).join(",")
  },
  resetQueryParams(){
    this.dataRange=[]
    this.queryParams.userName='',
        this.queryParams.phonenumber='',
        this.queryParams.status='',
        this.search()
  },
  handleSizeChange(size) {
    this.size=size
    this.search()
  },
  handleCurrentChange(page) {
    this.current=page
    this.search()
  },
  filterNode(value, data,node) {
    if (!value) return true;
    return node.data.deptName.indexOf(value) !== -1;
  },
  getData(){
    this.axios.get("/user/user/deptList").then(res=>{
      this.data=res.data.data
    })
  }
},created() {
  this.getData()
  this.axios.get("/dict/dict/data/getDataByType?dictType=sys_normal_disable").then(res=>{

    this.dictDataList=res.data.data
  })
  this.search()

}

}





</script>

<style scoped>



</style>
